import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { Textarea, InputNumber, Modal } from 'ant-design-vue'

@Component
export class SetMaxAgePop extends Render {
    showModal = false

    @Prop({ default: false }) show!: boolean
    // @Prop() basicInfo!: LongInsuranceCaseListDto<ReportCaseResultDto>
    @Emit('update:show')
    showChange(val: boolean) {return val}

    @Emit('refresh')
    handleRefresh() {}

    @Watch('show', { immediate: true })
    async handleWatchShow() {
        this.showModal = this.show
        // if (this.show) {
        //     this.basicInfo.isVisible = 1
        //     initModelValue(this.formConfig, this.basicInfo)
        // }
    }
    
    @Watch('showModal', { immediate: true })
    handleWatchShowDialog() {
        this.showChange(this.showModal)
    }

    render() { 
        return (
            <>
                <Modal v-model:open={ this.showModal } title="设置超龄">
                    <div>
                        <div class="flex items-center w-full mt-8">
                            <div class="w-84 text-right"> <span class="text-[#FF4D4F]">* </span> 超龄人数：</div>
                            <div class=" flex-1">
                                <InputNumber addon-after="人" style="width: 100%" placeholder="请输入人数" />
                            </div>
                        </div>
                        <div class="flex items-center mt-8">
                            <div class="opacity-0 w-84">超龄人数：</div>
                            <div class="mt-8 text-black-300 text-sm">该客户可投保的超龄人数为 <span class="text-black-200">4</span> 人，超出人次将投保不成功</div>
                        </div>
                    </div>
                </Modal>
            </>
        )
    }

}

export default toNative<{}, {}>(SetMaxAgePop)